<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-gradual-blue shadow">
			<block slot="content">{{ title }}</block>
		</cu-custom>
		<view class="cu-bar search">
			<!-- <view class="action" @tap="BackPage"><text class="cuIcon-back"></text></view> -->
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="inputFocus" @blur="inputBlur" v-model="searchText" :adjust-position="false" @confirm="searchClicked" type="text" :placeholder="searchText" confirm-type="search" />
			</view>
			<view class="action" @click="searchClicked(e)"><text>搜索</text></view>
		</view>
		<view class="bg-white">
			<view class="cu-bar">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text>
					<text class="text-bold text-blue">历史搜索</text>
				</view>
				<view class="action" @click="delHistoryClicked"><text class="cuIcon-delete"></text></view>
			</view>
			<view class="padding-sm">
				<block v-for="(item, index) of searchHistory" :key="index"><view class="cu-tag round margin-bottom-sm" @click="searchHistoryClicked(item)">{{item}}</view></block>
			</view>
			<!-- <view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-titles text-blue text-bold"></text>
					<text class="text-bold text-blue">猜你可能在找</text>
				</view>
			</view>
			<view class="padding-sm bg-white">
				<block v-for="(item, index) of 10" :key="index">
					<view class="cu-tag round margin-bottom-sm">
						<text>热门</text>
						<text class="cuIcon-hotfill text-red"></text>
					</view>
				</block>
			</view> -->

			<u-tabbar :list="tabbar" active-color="#2b85e4"></u-tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			title: '搜索',
			tabbar: '',
			placeholderText: '你不输入内容我搜神马~',
			searchText: '',
			searchHistory: []
		};
	},
	computed: {
		style() {
			var StatusBar= this.StatusBar;
			var CustomBar= this.CustomBar;
			var bgImage = this.bgImage;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			if (this.bgImage) {
				style = `${style}background-image:url(${bgImage});`;
			}
			return style
		}
	},
	onLoad() {
		this.tabbar = uni.$AppConfig.tabbars;
		this.getLocalData();
	},
	methods: {
		inputFocus(e) {
			this.InputBottom = e.detail.height;
		},
		inputBlur(e) {
			this.InputBottom = 0;
		},
		getLocalData() {
			const _this = this;
			const value = uni.getStorageSync('local_search_key');
			// console.log(value)
			if(value != '' && value != undefined) {
				let valueObj = JSON.parse(value);
				_this.searchHistory = valueObj.splice(0, 30);
			}
		},
		searchClicked() {
			const _this = this;
			let sHistoryArr = _this.searchHistory;
			let sValue = _this.searchText;
			let indexOfV = sHistoryArr.indexOf(sValue);
			if(indexOfV !== -1) {
				console.log(indexOfV, sHistoryArr)
				sHistoryArr.splice(indexOfV, 1);
			}
			sHistoryArr.push(sValue);
			uni.setStorageSync('local_search_key', JSON.stringify(sHistoryArr));
			
			uni.navigateTo({
				url: './search-detail/search-detail?sValue=' + sValue
			})
		},
		searchHistoryClicked(text) {
			this.searchText = text;
			this.searchClicked();
		},
		delHistoryClicked() {
			uni.showModal({
				content: '确认清空搜索历史吗？',
				success:function(){
					uni.showToast({
						title: '已清空',
						icon: 'none'
					})
					uni.clearStorageSync('local_search_key');
					this.searchHistory = [];
				}
			})
			
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}
.cu-bar .search-form {
	margin: 0 20upx;
}
.cu-text-lg {
	font-size: 46upx;
}
.cu-padding10 {
	/* padding: 0 10px !important; */
}
</style>
